<template>
  <div class="photo-preview-box" id="photoPreviewBox" style="display: none;">
  </div>
</template>

<script>
  import PhotoUtils from '../../mod/utils.photo';
  import Popover from '../../mod/popover';
  import NcpUtils from '../../js/mod.ncp';
  import ToastUtils from '../../mod/utils.toast';
  import AlertUtils from '../../mod/utils.alert';
  import strings from '../../assets/strings';

  export default {
    props: ['photos', 'from', 'initialSlideId'],
    data() {
      return {
        accessoryImages: [],
        imgSuffixArr: ['.jpg', '.jpeg', '.png', '.gif'],
        initialSlide: 0,
        downloadImageItem: {
          id: -1,
          path: '',
          name: '',
          suffix: '',
        },
        downloadDomHTML: '',
        downloadPopover: null,
        photoBrowserObject: null,
      }
    },
    watch: {
      photos: function () {
        let _this = this;
          console.log('------------', _this.photos.length)
        if (_this.photos.length > 0) {
          _this.downloadImageItem = {
            id: _this.photos[0].id,
            path: _this.photos[0].path ? _this.photos[0].path
                : _this.photos[0].url,
            name: _this.photos[0].name,
            suffix: _this.photos[0].suffiix ? _this.photos[0].suffiix
                : _this.photos[0].suffix,
          };
          _this.dealAccessoryImages();

          console.log('------------2333')
          let photoBrowserObj = PhotoUtils.photoBrowser.create(
              PhotoUtils.param.photoBrowser({
                photos: _this.accessoryImages,
                swiper: {
                  initialSlide: _this.initialSlide
                },
                on: {
                  opened: _this.openedPhotoPreview,
                  slideChange: () => {
                    _this.changePhotoPreview(this.activeIndex || 0);
                  },
                  tap: _this.tapClickPreview,
                },
                toolbar: false,
              })
          );
          console.log('------------', photoBrowserObj)
          if (photoBrowserObj) {
            _this.photoBrowserObject = photoBrowserObj;
            _this.$emit('openPhotoBrowser', photoBrowserObj);
          }
        }
      },
      initialSlideId: function () {
        let _this = this;
        var beforeSlideId = _this.initialSlideId;
        if (beforeSlideId > -1) {

          let accessoryImages = _this.photos || [];
          accessoryImages.forEach((item, ind) => {
            if (beforeSlideId == item.id) {
              _this.initialSlide = ind;
            }
          });
        } else {
          _this.initialSlide = 0;
        }
      },
    },
    mounted: function () {
      var _this = this;
      this.$f7ready((f7) => {
        window.context = _this;
      });
    },
    methods: {
      dealAccessoryImages: function () {
        let _this = this;
        let accessoryImages = _this.photos || [];
        let imgSuffixArr = ['.jpg', '.jpeg', '.png', '.gif'];
        let photos = [];
        accessoryImages.forEach((item, ind) => {
          let itemSuffix = item.suffiix ? item.suffiix : item.suffix;
          if (imgSuffixArr.indexOf(itemSuffix) > -1) {
            let img_url = item.path ? item.path : item.url;
            photos.push(img_url);
          }
        });

        _this.accessoryImages = photos;
      },
      changePhotoPreview: function (_ind) {
        let _this = this;
        var item = {
          id: _this.photos[_ind].id,
          path: _this.photos[_ind].path ? _this.photos[_ind].path
              : _this.photos[_ind].url,
          name: _this.photos[_ind].name,
          suffix: _this.photos[_ind].suffiix ? _this.photos[_ind].suffiix
              : _this.photos[_ind].suffix,
        };
        _this.downloadImageItem = item;
      },
      tapClickPreview: function () {
        let _this = this;
        _this.downloadPopover.open();
      },
      openedPhotoPreview: function () {
        let _this = this;
        _this.$f7.utils.nextTick(function () {
          if (_this.$$('.photo-browser .download-popover-link').length > 0) {
          } else {
            _this.$$('.photo-browser').append(
                '<a class="popover-open download-popover-link"></a>');

            // Popover.show({
            //   targetEl: 'a.download-popover-link',
            //   content: '<div class="popover popover-links">\n' +
            //       '      <div class="popover-inner">\n' +
            //       '        <div class="list">\n' +
            //       '          <ul>\n' +
            //       '            <li>\n' +
            //       '              <a class="list-button item-link " href="#" onclick="window.context.downloadAccessory()" >立即下载</a>\n'
            //       +
            //       '            </li>\n' +
            //       '          </ul>\n' +
            //       '        </div>\n' +
            //       '      </div>\n' +
            //       '    </div>',
            //   on: {
            //     opened(popover) {
            //     },
            //     closed(popover) {
            //       Popover.dismiss();
            //     },
            //   },
            // });

            // console.log('window context :', window.context);
            var downloadPopover = _this.$f7.popover.create({
              targetEl: 'a.download-popover-link',
              content: '<div class="popover popover-links">\n' +
                  '      <div class="popover-inner">\n' +
                  '        <div class="list">\n' +
                  '          <ul>\n' +
                  '            <li>\n' +
                  '              <a class="list-button item-link " href="#" onclick="window.context.downloadAccessory()" >立即下载</a>\n'
                  +
                  '            </li>\n' +
                  '          </ul>\n' +
                  '        </div>\n' +
                  '      </div>\n' +
                  '    </div>',
              on: {
                opened() {
                  Popover.show({el: 'a.download-popover-link'});
                  // Utils.fireEvent(_this, Utils.kEvents.updatePopoverIsShow,
                  //     {isOpened: true});
                },
                closed() {
                  Popover.dismiss();
                  // Utils.fireEvent(_this, Utils.kEvents.updatePopoverIsShow,
                  //     {isOpened: false});
                },
              },
            });
            _this.downloadPopover = downloadPopover;
          }
        });
      },
      downloadAccessory: function () {
        let _this = this;
        var _url = context.downloadImageItem.path;
        var _name = context.downloadImageItem.name;

        let nameArr = _name.split('.');
        let suffix = nameArr[nameArr.length - 1];
        AlertUtils.alert.show(AlertUtils.param.alert(
            {
              title: strings.alert.download.title,
              buttons: [
                {
                  onClick() {
                  },
                }, {
                  onClick() {
                    let params = {
                      url: _url,
                      title: _this.$f7.name,
                      type: suffix,
                      description: '附件下载中...',
                      fileName: _name,
                      success() {
                        ToastUtils.toast.show(ToastUtils.param.toast(
                            {text: strings.toast.download.success}));
                      },
                      error() {
                        ToastUtils.toast.show(ToastUtils.param.toast(
                            {text: strings.toast.download.error}));
                      },
                    };
                    NcpUtils.download(_this, params);
                  },
                }
              ]
            }));
      },
    }
  }
</script>

<style scoped>
  .download-btn-box {
    font-size: 18px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    background: rgba(255, 255, 255, 0.4);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 74px;
    right: 24px;
    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    z-index: 11001;
  }

  .download-btn-box .link {
    color: #000;
  }
</style>
